<template>
  <div class="test">
    <el-card
      shadow="always"
      :body-style="{ padding: '20px' }"
    >
      <div slot="header">
        <span class="title">请输入待办事项</span>
        <div style="margin-top: 15px">
          <el-input
            placeholder="请输入待办事项，按enter键确认输入"
            v-model="todo"
            autofocus
            @change="addTodos"
          >
            <template slot="append">确认</template>
          </el-input>
        </div>
      </div>
      <!-- card body -->
      <el-table
        class="my-table"
        :data="todos"
        border
        stripe
      >
        <el-table-column>
          <template slot-scope="scope">
            <el-checkbox
              v-model="scope.row.completed"
              :indeterminate="false"
              @change="editTodos(scope.row)"
            >
              <span style="margin-left: 10px">{{
                scope.row.title
              }}</span></el-checkbox
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="footer">
        <div class="footer-left">
          {{ isSwitch }}
          <el-checkbox
            v-model="isSwitch"
            :indeterminate="false"
          ></el-checkbox>
          <div>已完成{{ finishedNum }}/未完成{{ unFinishedNum }}</div>
        </div>
        <el-button
          type="danger"
          @click="deleteTodos"
          >删除已完成事项</el-button
        >
      </div>
    </el-card>
  </div>
</template>
<script>
import * as http from '@/api/todos.js'
export default {
  computed: {
    finishedNum() {
      return this.todos.filter((v) => v.completed).length
    },
    unFinishedNum() {
      return this.todos.filter((v) => !v.completed).length
    },
    isSwitch: {
      get() {
        return this.todos.every((v) => v.completed)
      },
      set(isSwitch) {
        // console.log(isSwitch)
        this.todos.forEach(async (v) => {
          // v.completed = isSwitch
          await http.editTodos(isSwitch, v.id)
        })
        this.getTodos()
      }
    }
  },
  data() {
    return {
      todo: '',
      todos: []
    }
  },
  created() {
    this.getTodos()
  },
  methods: {
    async getTodos() {
      const res = await http.getTodos()
      this.todos = res
    },
    async addTodos(todo) {
      if (!todo) return
      this.todo = ''
      http.addTodos({
        id: Date.now(),
        title: todo,
        complete: false
      })

      this.getTodos()
    },
    async editTodos(row) {
      console.log(row)
      http.editTodos(row.completed, row.id)
      // this.getTodos()
    },
    deleteTodos() {
      this.todos.forEach(async (v) => {
        if (v.completed) await http.deleteTodos(v.id)
      })
      this.getTodos()
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  font-size: 16px;
  font-weight: 600;
}
.my-table {
  // ::v-deep 样式穿通
  ::v-deep .has-gutter {
    display: none;
  }
}
.footer {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .footer-left {
    display: flex;
    align-items: center;
    div {
      margin-left: 20px;
    }
  }
}
</style>
